<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/jsp/commons/taglibs.jsp" %>
<!DOCTYPE HTML>
<html ng-app>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <title>${title}</title>
    <%@ include file="/WEB-INF/jsp/commons/meta.jsp" %>
    <link href="${ctx}/resources/new/style.css" type="text/css" rel="stylesheet"/>

</head>
<body>
<link href="${ctx}/resources/css/print.css" type="text/css" rel="stylesheet"/>
<script src="${ctx}/resources/js/jquery.PrintArea.js" type="text/javascript"></script>
<script>
    $(function () {
        $("#printBtn").click(function () {
            $("#qrDiv").printArea();
        });
        $("#chooseBox").change(function () {
            $("#pleaseSelect").remove();
            $("#qrDiv .qr:not(.box)").remove();
            var boxId = $(this).val();
            if (boxId) {
                $.post("${ctx}/adoms/qrGoodsCode/printByBox", {
                    boxId: boxId
                }, function (data) {
                    var box = data.box;
                    $("#boxImg").attr("src", box.uri);
                    var boxNum = "b." + box.id + "." + box.qrCode + "." + box.createScale;
                    $("#boxNum").html(boxNum);
                    var goodsList = data.goodsList;
                    $.each(goodsList, function (i, goods) {
                        var goodsDiv = $("#qrClone .qr").clone();
                        $(".goods", goodsDiv).attr("src", goods.goodsUri);
                        $(".integral", goodsDiv).attr("src", goods.integralUri);
                        $("[goods]", goodsDiv).html("g." + goods.innerNum);
                        $("[integral]", goodsDiv).html("i." + goods.innerNum);
                        $("#qrDiv").append(goodsDiv);
                    });
                }, "json");
            }
        });
    });
</script>
<div class="well">
    <div class="container form-horizontal">
        按箱打印，请选择箱码：
        <select id="chooseBox">
            <option id="pleaseSelect">请选择...</option>
            <c:forEach items="${boxList }" var="box">
                <option value="${box.id }">b.${box.id }.${box.qrCode }.${box.createScale } - ${box.qrName }
                    - ${box.createScale }条
                </option>
            </c:forEach>
        </select>
        <button id="printBtn" class="btn">打印二维码</button>
    </div>
    <div class="container"></div>
</div>
<div class="container form-horizontal">
    <div id="qrDiv">
        <div class="qr box">
            <img id="boxImg" src="" class="goods">
            <span id="boxNum"></span>

            <div class="qrText">
                b.箱码
                <br/>
                g.商品二维码
                <br/>
                i.商品积分码
                <br/>
            </div>
        </div>
    </div>
</div>
<div id="qrClone" class="hide">
    <div class="qr">
        <img src="" class="goods">
        <span goods></span>
        <img src="" class="integral">
        <span integral></span>
    </div>
</div>
</body>
</html>